<template>
    <el-select
        :v-model="value"
        v-bind="$attrs"
        :value-key="valueKey ? valueKey : ''"
        :filterable="!!searchKey || filterable"
        :remote="!!searchKey"
        :clearable="clearable"
        :multiple="multiple"
        :collapse-tags="multiple"
        :collapse-tags-tooltip="multiple"
        reserve-keyword
        :loading="loading"
        :popper-append-to-body="popperAppendToBody"
        :remote-method="remoteMethod"
        :url="url"
        @change="changeEvent"
    >
        <el-option
            v-for="option in optionList"
            :key="option[props.key]"
            :label="option[props.value]"
            :value="option[props.key]"
        />
        <!-- :value="valueKey ? option : option[props.key]" -->
    </el-select>
</template>

<script lang="ts">
/**
 * @Description: 下拉组件
 */
import { compact, fill, split, zipObjectDeep } from 'lodash-es'
import { defineComponent, reactive, PropType, toRefs, watchEffect } from 'vue'
import { getItemAutocompleteApi } from '@/api/common'
interface Options {
    key: number | string
    value: string
}
export default defineComponent({
    name: 'GTopSelect',
    props: {
        // 是否插入body
        popperAppendToBody: {
            type: Boolean,
            default: false
        },
        // 如果设置了该属性，绑定值为对象
        valueKey: {
            type: String,
            default: ''
        },
        // 搜索内容的key，如果设置了该属性，会启用远程搜索
        searchKey: {
            type: String,
            default: ''
        },
        // 是否可搜索
        filterable: {
            type: Boolean,
            default: true
        },
        // 是否可清除
        clearable: {
            type: Boolean,
            default: true
        },
        // 是否可多选
        multiple: {
            type: Boolean,
            default: false
        },
        // 下拉数据
        options: {
            type: Array as PropType<Options[]>,
            default: () => []
        },
        // 绑定值
        value: {
            type: [String, Number, Object],
            default: ''
        },
        // 选中的值(name)
        selectValue: {
            type: String,
            default: ''
        },
        // 选中的key(id)
        selectKey: {
            type: String,
            default: ''
        },
        // 默认key，value，如果是id name，传入props="{key: 'id', value: 'name'}"
        props: {
            type: Object,
            default: () => {
                return {
                    key: 'key',
                    value: 'value'
                }
            }
        },
        // 后台接口的url
        url: {
            type: String,
            default: ''
        }
    },
    emits: ['update:value'],
    setup(props, { emit }) {
        const select = reactive({
            loading: false,
            optionList: props.options
        })
        // 远程搜索
        const remoteMethod = (query: string) => {
            // console.log('url=====', props.url)
            // console.log('query=====', query)
            if (query.trim() !== '') {
                const _url = split(props.url, '|')
                // console.log('_url----', _url);
                const keyArr = compact(split(_url[1], ','))
                // console.log('keyArr----', keyArr);
                const valArr = fill(Array(keyArr.length), query)
                // console.log('valArr----', valArr);
                const params = zipObjectDeep(keyArr, valArr)
                // console.log('params----', params);
                select.loading = true
                getItemAutocompleteApi(_url[0], params).then((res: any) => {
                    console.log('res---auto----', res)

                    select.loading = false
                    select.optionList = res.result.map((item) => {
                        return { id: item.researchOrgId, name: item.researchOrgName }
                    })
                })
            } else {
                select.optionList = []
            }
        }
        // 选中值改变
        const changeEvent = (val: any) => {
            // console.log('val===', val)
            emit('update:value', val)
        }
        watchEffect(() => {
            if (select.optionList.length === 0) {
                select.optionList = props.options
            }
        })

        return {
            ...toRefs(select),
            changeEvent,
            remoteMethod
        }
    }
})
</script>
